<template>
    <a-form-model labelAlign="left" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">

                <a-form-model-item label="封面图片" prop="picUrl" ref="picUrl">
                    <a-upload
                            list-type="picture-card"
                            :show-upload-list="false"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                            :customRequest="customRequest"
                    >
                        <img v-if="form.picUrl" :src="form.picUrl" class="PreviewImg" alt="封面图预览"/>
                        <div v-else>
                            <a-icon :type="loading ? 'loading' : 'plus'"/>
                            <div class="ant-upload-text">封面图片</div>
                        </div>
                    </a-upload>
                </a-form-model-item>

                <a-form-model-item label="链接标题" prop="title" ref="title">
                    <a-input v-model="form.title" placeholder="请输入标题" allowClear
                             @blur="()=>{$refs.title.onFieldBlur();}"/>
                </a-form-model-item>

                <a-form-model-item label="链接地址" prop="url" ref="url">
                    <a-input v-model="form.url" placeholder="请输入作者" allowClear
                             @blur="()=>{$refs.url.onFieldBlur();}"/>
                </a-form-model-item>

                <a-form-model-item label="链接摘要" prop="description" ref="description">
                    <a-textarea :rows="5" v-model="form.description" placeholder="请输入摘要" allowClear
                                @blur="()=>{$refs.description.onFieldBlur();}"
                    />
                </a-form-model-item>


    </a-form-model>
</template>
<script>
    import {formRule} from './validator'
    import {fileUpload} from '../../../../../../util/internal.api'
    export default {
        props: ['dataList', 'dataIndex'],

        data() {
            return {
                showSelector: false,
                upLoading: false,
                loading: false,
                labelCol: {
                    span: 6,

                },
                wrapperCol: {
                    span: 18,

                },
                rules: formRule(), //表单验证规则
            };
        },
        methods: {
            boolen(d) {
                return !!d;
            }
            ,
            handerCloseModal(e) {
                this.showSelector = false;
                if (e.render) {
                    this.form.picUrl = e.data.mediaUrl;
                    this.form.thumbMediaId = e.data.mediaId;
                }
            },

            //上传方法
            //===========upload================
            //自定义上传方法
            customRequest(e) {
                //值要data里面的file对象 其他对象不要了
                // formData.append('参数名称', "参数值")
                const formData = new FormData();
                formData.append('file', e.file)
                fileUpload(formData).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.form.picUrl = res.data.url;
                    }
                })
            },
            //监听上传状态  uploading 开始
            handleChange(info) {
                console.log(info);
                if (info.file.status === 'uploading') {
                    this.loading = true;
                }
            },
            //上传之前数据检查
            beforeUpload(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('只允许上传JPG、PNG格式的图片文件');
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('单个文件图片不能超过 2MB!');
                }
                return isJpgOrPng && isLt2M;
            },


        },
        computed: {
            form() {
                return this.dataList[this.dataIndex];
            }
        }
    };
</script>
<style scoped>


    .PreviewImg {
        max-width: 100%;
        max-height: 150px;
        overflow: hidden;
    }
</style>
